<template>
  <div>
    <NavMenu></NavMenu>
    <h3>填写职位发布信息</h3>
    <div id="loginWarp">
      <el-form :model="loginForm" :label-position="labelPosition" :rules="rules" ref="publishForm" label-width="100px"
        class="loginForm">
        <el-form-item label="公司名称" prop="name">
          <el-input type="text" v-model="loginForm.name" autocomplete="off" placeholder="请输入公司名称">公司名称</el-input>
        </el-form-item>
        <el-form-item label="公司类型" prop="type">
          <el-input type="text" v-model="loginForm.type" autocomplete="off" placeholder="请输入公司名称">公司名称</el-input>
        </el-form-item>
        <el-form-item label="职位" prop="job">
          <el-input type="text" v-model="loginForm.job" autocomplete="off" placeholder="请输入招聘职位"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-input type="text" v-model="loginForm.num" autocomplete="off" placeholder="请输入招聘人数"></el-input>
        </el-form-item>
        <el-form-item label="薪水" prop="salary">
          <el-input type="text" v-model="loginForm.salary" autocomplete="off" placeholder="请输入薪水"></el-input>
        </el-form-item>
        <el-form-item label="职位描述" prop="desc">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" v-model="loginForm.desc" autocomplete="off" placeholder="请输入职位描述"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="text" v-model="loginForm.address" autocomplete="off" placeholder="请输入职位描述"></el-input>
        </el-form-item>
        <el-form-item label="公司基本信息" prop="basicInfo">
          <el-input type="text" v-model="loginForm.basicInfo" autocomplete="off" placeholder="请输入职位描述"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('publishForm')">发布</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ajax from "@/components/ajax";
import NavMenu from "@/components/NavMenu";
import md5 from "js-md5";

export default {
  name: "publish",
  data() {
    return {
      loginForm: {
        name: "",
        type: "",
        jobs: "",
        address: "",
        basicInfo: ""
      },
      labelPosition: "right",
      rules: {
        name: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        job: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        num: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        salary: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        desc: [
          {
            required: true,
            trigger: "blur"
          }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      const that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          const data = this.$refs[formName].model;
          let formData = new FormData();
          formData.append("name", data.name);
          formData.append("job", data.job);
          formData.append("num", data.num);
          formData.append("salary", data.salary);
          formData.append("desc", data.desc);

          formData.append("type", data.type);
          formData.append("address", data.address);
          formData.append("basicInfo", data.basicInfo);

          ajax({
            method: "post",
            url: "http://127.0.0.1:3000/publish",
            data: formData,
            withCredentials: true,
            success: function(res) {
              if (res.status === 0) {
                that.$message({
                  message: "发布成功",
                  type: "success"
                });
              } else {
                that.$message.error({
                  message: "发布失败"
                });
              }
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    }
  },
  components: {
    NavMenu
  }
};
</script>
<style>
#loginWarp {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 500px) {
  .el-input {
    width: 80vw;
    padding-bottom: 1rem;
  }
}

@media screen and (min-width: 501px) {
  .el-input {
    width: 20vw;
    padding-bottom: 1rem;
  }
}
</style>
